<template>
  <el-aside width="240px" class="left-aside">
    <el-menu
        :default-active="activeCat"
        class="cat-menu"
        @select="handleSelect"
        :default-openeds="defaultOpeneds"
    >
      <el-sub-menu
          v-for="c in categories"
          :key="c.id"
          :index="String(c.id)"
      >
        <template #title>
          <el-icon><Goods /></el-icon>
          <span>{{ c.name }}</span>
          <span class="badge-dot">{{ c.count }}</span>
        </template>

        <!-- 手机分类的子选项 -->
        <el-menu-item
            v-if="c.id === 1"
            v-for="sub in phoneSubcategories"
            :key="sub.id"
            :index="`phone-${sub.id}`"
        >
          <span>{{ sub.name }}</span>
        </el-menu-item>

        <!-- 笔记本分类的子选项 -->
        <el-menu-item
            v-if="c.id === 2"
            v-for="sub in laptopSubcategories"
            :key="sub.id"
            :index="`laptop-${sub.id}`"
        >
          <span>{{ sub.name }}</span>
        </el-menu-item>

        <!-- 平板分类的子选项 -->
        <el-menu-item
            v-if="c.id === 3"
            v-for="sub in tabletSubcategories"
            :key="sub.id"
            :index="`tablet-${sub.id}`"
        >
          <span>{{ sub.name }}</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Goods } from '@element-plus/icons-vue'
import { getCategories } from '../api/service'

const emit = defineEmits(['select'])
const categories = ref<any[]>([])
const activeCat = ref<string>('')
const defaultOpeneds = ref<string[]>(['1', '2', '3'])

// 手机子分类 - 关联具体商品ID
const phoneSubcategories = ref([
  { id: 1, name: '旗舰机型', productIds: [1, 2] }, // HUAWEI Pura 80 Pro, Xiaomi 14 Ultra
  { id: 2, name: '性价比机型', productIds: [4, 5] }, // OPPO Find X7 Ultra, vivo X100 Pro
  { id: 3, name: '折叠屏', productIds: [1] }, // 可以关联现有商品或添加新商品
  { id: 4, name: '摄影手机', productIds: [2, 3] } // Xiaomi 14 Ultra, iPhone 15 Pro
])

// 笔记本子分类 - 关联具体商品ID
const laptopSubcategories = ref([
  { id: 1, name: '游戏本', productIds: [6] }, // MacBook Pro 14
  { id: 2, name: '轻薄本', productIds: [7, 8] }, // Xiaomi Book Pro 16, HUAWEI MateBook X Pro
  { id: 3, name: '商务本', productIds: [9] }, // Dell XPS 13
  { id: 4, name: '创作本', productIds: [6, 8] } // MacBook Pro 14, HUAWEI MateBook X Pro
])

// 平板子分类 - 关联具体商品ID
const tabletSubcategories = ref([
  { id: 1, name: '娱乐平板', productIds: [10, 12] }, // iPad Pro 12.9, Xiaomi Pad 6
  { id: 2, name: '学习平板', productIds: [11, 12] }, // HUAWEI MatePad Pro, Xiaomi Pad 6
  { id: 3, name: '绘画平板', productIds: [10] }, // iPad Pro 12.9
  { id: 4, name: '办公平板', productIds: [11] } // HUAWEI MatePad Pro
])

const handleSelect = (id: string) => {
  activeCat.value = id

  // 解析选择的分类类型和ID
  const [categoryType, subId] = id.split('-')

  if (subId) {
    // 子分类点击
    const subCategory = findSubCategory(categoryType, parseInt(subId))
    if (subCategory) {
      emit('select', {
        type: 'subcategory',
        categoryType: categoryType,
        subId: parseInt(subId),
        productIds: subCategory.productIds,
        name: subCategory.name
      })
    }
  } else {
    // 主分类点击
    emit('select', {
      type: 'category',
      categoryId: parseInt(id),
      name: categories.value.find(c => c.id === parseInt(id))?.name || ''
    })
  }
}

// 查找子分类信息
const findSubCategory = (type: string, id: number) => {
  switch (type) {
    case 'phone':
      return phoneSubcategories.value.find(sub => sub.id === id)
    case 'laptop':
      return laptopSubcategories.value.find(sub => sub.id === id)
    case 'tablet':
      return tabletSubcategories.value.find(sub => sub.id === id)
    default:
      return null
  }
}

onMounted(async () => {
  categories.value = await getCategories()
  categories.value = categories.value.map(cat => ({
    ...cat,
    count: getSubcategoryCount(cat.id)
  }))
})

const getSubcategoryCount = (categoryId: number) => {
  const counts: { [key: number]: number } = {
    1: 156,
    2: 89,
    3: 67
  }
  return counts[categoryId] || 0
}
</script>

<style scoped>
/* 保持原有的样式不变 */
.left-aside {
  background: #2c2c2c;
  border-right: 1px solid #444;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 60px;
  z-index: 999;
  overflow-y: auto;
}

.cat-menu {
  border: none;
  background: #2c2c2c;
  padding: 10px 0;
}

:deep(.el-sub-menu__title) {
  color: #fff !important;
  font-size: 16px;
  height: 52px;
  line-height: 52px;
  padding: 0 20px;
  margin: 4px 8px;
  border-radius: 6px;
}

:deep(.el-sub-menu__title:hover) {
  background: #409eff !important;
  color: #ffffff !important;
}

:deep(.el-menu-item) {
  color: #ddd;
  font-size: 14px;
  height: 44px;
  line-height: 44px;
  padding: 0 20px 0 50px !important;
  margin: 2px 8px;
  border-radius: 4px;
  background: #3a3a3a;
}

:deep(.el-menu-item:hover) {
  background: #409eff !important;
  color: #ffffff !important;
}

:deep(.el-menu-item.is-active) {
  background: #409eff;
  color: #ffffff;
}

.badge-dot {
  margin-left: auto;
  background: #f56c6c;
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-right: 10px;
}

:deep(.el-sub-menu .el-icon) {
  color: #fff;
}

:deep(.el-sub-menu__title:hover .el-icon) {
  color: #fff !important;
}

.left-aside::-webkit-scrollbar {
  width: 6px;
}

.left-aside::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}

.left-aside::-webkit-scrollbar-thumb:hover {
  background: #777;
}
</style>